<!-- 关于我页面 - 展示个人信息、博客数据、技术足迹和作品展示 -->
<template>
    <div class="about-page">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="content-wrapper">
                <!-- 个人介绍区域 - 包含头像、标题和技术标签 -->
                <div class="hero-section">
                    <!-- 背景装饰区域 -->
                    <div class="hero-background">
                        <div class="code-decoration">
                            <pre><code>const aboutMe = {
  name: '零の守墓人',
  passion: '技术',
  goal: '分享与成长'
};</code></pre>
                        </div>
                    </div>

                    <!-- 个人介绍内容区域 -->
                    <div class="hero-content">
                        <!-- 头像容器 -->
                        <div class="avatar-container">
                            <div class="avatar">
                                <img src="/src/assets/pic/avatar.jpg" alt="博主头像" />
                            </div>
                        </div>

                        <!-- 个人标题 -->
                        <h1 class="hero-title" data-text="零の守墓人">
                            <div class="title-border"></div>
                            <span>零の守墓人</span>
                        </h1>

                        <!-- 技术标签展示 -->
                        <div class="tech-tags">
                            <span class="tech-tag">前端开发</span>
                            <span class="tech-tag">Vue.js</span>
                            <span class="tech-tag">技术博主</span>
                        </div>

                        <!-- 个人描述 -->
                        <p class="hero-description">
                            在这里，我用代码记录技术的足迹，用文字分享技术的思考。
                            每一行代码都是对技术的热爱，每一次提交都是对完美的追求。
                            专注于前端技术栈，热爱开源，期待与更多技术爱好者交流学习。
                        </p>

                        <!-- 订阅按钮 -->
                        <div class="hero-actions">
                            <el-button type="primary" size="large" @click="goToSubscribe" class="subscribe-btn">
                                <el-icon>
                                    <Message />
                                </el-icon>
                                订阅更新
                            </el-button>
                        </div>
                    </div>
                </div>

                <!-- 网站资讯区域 - 显示博客统计数据 -->
                <div class="stats-section">
                    <h2 class="section-title">博客数据</h2>
                    <!-- 统计数据网格 -->
                    <div class="stats-grid">
                        <!-- 文章数量统计卡片 -->
                        <div class="stat-card">
                            <div class="stat-icon">
                                <el-icon>
                                    <Document />
                                </el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ blogStats.totalPosts }}</div>
                                <div class="stat-label">篇文章</div>
                            </div>
                        </div>

                        <!-- 访问量统计卡片 -->
                        <div class="stat-card">
                            <div class="stat-icon">
                                <el-icon>
                                    <View />
                                </el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ blogStats.totalVisits }}</div>
                                <div class="stat-label">次访问</div>
                            </div>
                        </div>

                        <!-- 阅读量统计卡片 -->
                        <div class="stat-card">
                            <div class="stat-icon">
                                <el-icon>
                                    <View />
                                </el-icon>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">{{ blogStats.totalReads }}</div>
                                <div class="stat-label">次阅读</div>
                            </div>
                        </div>
                    </div>

                    <!-- 最后更新信息 -->
                    <div class="last-update">
                        <div class="update-info">
                            <el-icon>
                                <Clock />
                            </el-icon>
                            <span>最后更新: {{ blogStats.lastUpdate }}</span>
                        </div>
                        <div class="update-detail">
                            代码提交: 新增文章《Vue3最佳实践》
                        </div>
                    </div>
                </div>

                <!-- 贡献时间图区域 - GitHub风格的贡献热力图 -->
                <div class="contribution-section">
                    <h2 class="section-title">技术足迹</h2>

                    <div class="contribution-container">
                        <!-- 贡献图头部信息 -->
                        <div class="contribution-header">
                            <div class="current-date">
                                <el-icon>
                                    <Clock />
                                </el-icon>
                                <span>{{ currentDate }}</span>
                            </div>
                        </div>

                        <!-- 贡献图内容区域 -->
                        <div class="contribution-content">
                            <!-- 年份选择器 -->
                            <div class="year-selector">
                                <div v-for="year in availableYears" :key="year" class="year-item"
                                    :class="{ active: selectedYear === year }" @click="selectYear(year)">
                                    {{ year }}
                                </div>
                            </div>

                            <!-- 贡献图主体 -->
                            <div class="contribution-graph">
                                <!-- 月份标签行 -->
                                <div class="months-labels">
                                    <span v-for="month in months" :key="month" class="month-label">
                                        {{ month }}
                                    </span>
                                </div>

                                <!-- 图表容器 -->
                                <div class="graph-container">
                                    <!-- 星期标签列 -->
                                    <div class="weekday-labels">
                                        <span v-for="day in weekdays" :key="day" class="weekday-label">
                                            {{ day }}
                                        </span>
                                    </div>

                                    <!-- 贡献网格 -->
                                    <div class="contribution-grid">
                                        <div v-for="(contribution, index) in currentYearContributions" :key="index"
                                            class="contribution-cell"
                                            :class="[getContributionClass(contribution.count), { 'empty': contribution.isEmpty }]"
                                            :title="contribution.isEmpty ? '' : `${contribution.date}: ${contribution.count} 次活动`">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 贡献统计摘要 -->
                        <div class="contribution-summary">
                            <div class="summary-text">
                                {{ currentYearStats.totalPosts }} 篇文章 {{ currentYearStats.totalWords }} 字
                                在 {{ selectedYear }} 年
                            </div>
                        </div>

                        <!-- 贡献图例 -->
                        <div class="contribution-legend">
                            <span class="legend-label">Less</span>
                            <div class="legend-cells">
                                <div class="legend-cell level-0"></div>
                                <div class="legend-cell level-1"></div>
                                <div class="legend-cell level-2"></div>
                                <div class="legend-cell level-3"></div>
                                <div class="legend-cell level-4"></div>
                            </div>
                            <span class="legend-label">More</span>
                        </div>
                    </div>
                </div>

                <!-- 作品展示区域 - 展示技术项目 -->
                <div class="portfolio-section">
                    <h2 class="section-title">技术作品</h2>

                    <!-- 项目网格 -->
                    <div class="portfolio-grid">
                        <!-- 项目卡片，循环渲染所有项目 -->
                        <div v-for="project in projects" :key="project.id" class="project-card">
                            <!-- 项目预览图 -->
                            <div class="project-preview">
                                <img :src="project.preview" :alt="project.title" />
                            </div>

                            <!-- 项目信息 -->
                            <div class="project-info">
                                <h3 class="project-title">{{ project.title }}</h3>
                                <!-- 技术标签 -->
                                <div class="project-tech">
                                    <span v-for="tech in project.technologies" :key="tech" class="tech-badge">
                                        {{ tech }}
                                    </span>
                                </div>
                                <p class="project-description">{{ project.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据、计算属性和生命周期钩子
import { ref, computed, onMounted } from 'vue'

// Element Plus 图标组件和消息组件 - 用于界面图标显示和消息提示
import {
    User,      // 用户图标
    Document,  // 文档图标
    View,      // 查看图标
    Clock,     // 时钟图标
    Message    // 消息图标
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// API工具函数导入
import { get } from '../utils/api'
import { API_PATHS } from '../constants/api'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// Vue Router - 用于页面导航
import { useRouter } from 'vue-router'

// ==================== 类型定义 ====================

/**
 * 博客统计数据类型定义
 */
interface BlogStats {
    totalPosts: number
    totalVisits: number
    totalReads: number
    lastUpdate: string
    totalComments?: number
    totalLikes?: number
    averageReadTime?: number
}

// ==================== 响应式数据 ====================

// TODO: 调用后端API获取博客统计数据

/**
 * 博客统计数据
 * @description 从后端API获取的博客统计数据，包括文章数量、访问量、阅读量等
 */
const blogStats = ref<BlogStats>({
    totalPosts: 0,         // 文章总数
    totalVisits: 0,        // 访问总数
    totalReads: 0,         // 阅读总数
    lastUpdate: ''         // 最后更新时间
})

/**
 * 加载状态
 * @description 控制统计数据加载状态
 */
const isLoading = ref(false)

/**
 * 错误信息
 * @description 存储API调用失败时的错误信息
 */
const errorMessage = ref('')

/**
 * 获取博客统计数据
 * @description 从后端API获取博客的统计数据，包括文章数量、访问量、阅读量等
 */
const fetchBlogStats = async () => {
    try {
        // 设置加载状态
        isLoading.value = true
        errorMessage.value = ''

        // 调用API获取统计数据
        const response = await get(API_PATHS.STATS.SITE, {
            withAuth: false, // 统计数据不需要认证
            timeout: 8000,   // 8秒超时
            retry: 2         // 失败重试2次
        })

        if (response.success && response.data) {
            // 成功获取数据
            blogStats.value = {
                totalPosts: response.data.totalPosts || 0,
                totalVisits: response.data.totalVisits || 0,
                totalReads: response.data.totalReads || 0,
                lastUpdate: response.data.lastUpdate || new Date().toLocaleString('zh-CN'),
                totalComments: response.data.totalComments || 0,
                totalLikes: response.data.totalLikes || 0,
                averageReadTime: response.data.averageReadTime || 0
            }

            console.log('成功获取博客统计数据:', response.data)
        } else {
            // API返回错误
            errorMessage.value = response.error || '获取统计数据失败'
            console.error('获取统计数据失败:', response.error)
            
            // 显示错误提示
            ElMessage.error(errorMessage.value)
            
            // 使用默认数据
            blogStats.value = {
                totalPosts: 25,
                totalVisits: 1234,
                totalReads: 5678,
                lastUpdate: '2024年1月15日 14:30'
            }
        }
    } catch (error) {
        // 网络错误或其他异常
        errorMessage.value = error instanceof Error ? error.message : '网络请求失败'
        console.error('获取统计数据异常:', error)
        
        // 显示错误提示
        ElMessage.error('网络连接失败，请检查网络后重试')
        
        // 使用默认数据
        blogStats.value = {
            totalPosts: 25,
            totalVisits: 1234,
            totalReads: 5678,
            lastUpdate: '2024年1月15日 14:30'
        }
        
        // 如果是开发环境，显示详细错误信息
        if (import.meta.env.DEV) {
            console.error('详细错误信息:', error)
        }
    } finally {
        // 无论成功还是失败，都要清除加载状态
        isLoading.value = false
    }
}

/**
 * 当前选中的年份
 * @description 控制贡献图显示的年份，默认为2025年
 */
const selectedYear = ref(2025)

/**
 * 可选择的年份列表
 * @description 贡献图支持的年份范围，从2021年到2025年
 */
const availableYears = ref([2025, 2024, 2023, 2022, 2021])

/**
 * 月份标签数组
 * @description 贡献图顶部显示的月份标签，按照GitHub风格排列
 */
const months = ref(['Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'])

/**
 * 星期标签数组
 * @description 贡献图左侧显示的星期标签
 */
const weekdays = ref(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])

/**
 * 项目作品数据数组
 * @description 存储展示的项目信息，包括标题、描述、技术栈和预览图
 */
const projects = ref([
    {
        id: 1,
        title: '个人博客系统',
        description: '基于Vue.js和Element Plus构建的现代化博客系统，支持文章管理、分类标签、评论系统等功能。',
        technologies: ['Vue.js', 'Element Plus', 'SCSS'],
        preview: '/src/assets/project-blog.jpg'
    },
    {
        id: 2,
        title: '电商管理平台',
        description: '使用React和Ant Design开发的企业级电商后台管理系统，包含商品管理、订单处理、用户管理等功能。',
        technologies: ['React', 'Ant Design', 'TypeScript'],
        preview: '/src/assets/project-ecommerce.jpg'
    },
    {
        id: 3,
        title: '企业管理系统',
        description: '基于Vue3和TypeScript构建的企业级管理系统，采用模块化设计，支持权限管理和工作流。',
        technologies: ['Vue3', 'TypeScript', 'Pinia'],
        preview: '/src/assets/project-admin.jpg'
    }
])

// ==================== 计算属性 ====================

/**
 * 当前日期格式化
 * @description 格式化当前日期显示，格式为YYYY-MM-DD
 * @returns 格式化后的日期字符串
 */
const currentDate = computed(() => {
    const now = new Date()
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
})

/**
 * 当前年份的贡献数据
 * @description 根据选中的年份生成贡献数据，按照GitHub风格的布局排列
 * @returns 贡献数据数组，包含日期、活动次数和是否为空的信息
 */
const currentYearContributions = computed(() => {
    const contributions = []
    const year = selectedYear.value

    // 获取该年的第一天和最后一天
    const firstDay = new Date(year, 0, 1)
    const lastDay = new Date(year, 11, 31)

    // 获取该年第一天是星期几（0是星期日）
    const firstDayOfWeek = firstDay.getDay()

    // 计算需要填充的空格数量（为了对齐到星期日）
    const paddingDays = firstDayOfWeek

    // 添加填充空格，确保图表对齐
    for (let i = 0; i < paddingDays; i++) {
        contributions.push({
            date: '',
            count: 0,
            isEmpty: true
        })
    }

    // 添加该年的所有日期和对应的活动数据
    for (let d = new Date(firstDay); d <= lastDay; d.setDate(d.getDate() + 1)) {
        const dateStr = d.toISOString().split('T')[0]
        // 生成更真实的贡献数据，模拟实际的活动分布
        const random = Math.random()
        let count = 0
        if (random < 0.3) count = 0        // 30%概率无活动
        else if (random < 0.6) count = 1   // 30%概率1次活动
        else if (random < 0.8) count = 2   // 20%概率2次活动
        else if (random < 0.9) count = 3   // 10%概率3次活动
        else count = 4                      // 10%概率4次活动

        contributions.push({
            date: dateStr,
            count: count,
            isEmpty: false
        })
    }

    return contributions
})

/**
 * 当前年份的统计数据
 * @description 根据选中的年份计算统计数据，包括文章数量和字数统计
 * @returns 包含文章数量和字数的统计对象
 */
const currentYearStats = computed(() => {
    // 生成随机的文章数量（10-30篇）
    const totalPosts = Math.floor(Math.random() * 20) + 10
    // 根据文章数量计算总字数（每篇约1500字）
    const totalWords = totalPosts * 1500 + Math.floor(Math.random() * 5000)

    return {
        totalPosts,
        totalWords: totalWords.toLocaleString()  // 格式化数字显示
    }
})

// ==================== 方法函数 ====================

/**
 * 路由实例
 * @description 用于页面导航
 */
const router = useRouter()

/**
 * 跳转到订阅页面
 * @description 点击订阅按钮时跳转到订阅页面
 */
const goToSubscribe = () => {
    router.push('/subscribe')
}

/**
 * 选择年份
 * @param year 选中的年份
 * @description 切换贡献图显示的年份，更新选中的年份状态
 */
const selectYear = (year: number) => {
    selectedYear.value = year
}

/**
 * 获取贡献方块的CSS类名
 * @param count 活动次数
 * @description 根据活动次数返回对应的CSS类名，用于控制方块的颜色深浅
 * @returns 对应的CSS类名字符串
 */
const getContributionClass = (count: number): string => {
    if (count === 0) return 'level-0'    // 无活动
    if (count <= 1) return 'level-1'     // 1次活动
    if (count <= 3) return 'level-2'     // 2-3次活动
    if (count <= 5) return 'level-3'     // 4-5次活动
    return 'level-4'                      // 6次以上活动
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的初始化
 * @description 初始化页面数据和动画，可以在这里添加页面加载动画或其他初始化逻辑
 */
onMounted(() => {
    // 获取博客统计数据
    fetchBlogStats()
    
    // 可以在这里添加页面加载动画或其他初始化逻辑
    console.log('About页面已加载')
})
</script>

<style scoped lang="scss">
// 导入关于我页面组件样式
@use '../assets/styles/clients/_about';
</style>